package com.gin.kotlin.gf2gamecommunity.routes

import androidx.compose.animation.core.tween
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavGraphBuilder
import androidx.navigation.compose.composable
import androidx.navigation.toRoute
import androidx.paging.compose.collectAsLazyPagingItems
import com.gin.kotlin.gf2gamecommunity.base.composable.Loading
import com.gin.kotlin.gf2gamecommunity.base.composable.MyImage
import com.gin.kotlin.gf2gamecommunity.navi.GF2Navigator
import com.gin.kotlin.gf2gamecommunity.viewmodel.ThemeViewModel
import com.gin.kotlin.response.theme.ThemeInfo
import kotlinx.serialization.Serializable


fun NavGraphBuilder.themeList(navigator: GF2Navigator) = composable<ThemeListRoute>(
    // 从屏幕右侧进入，持续500毫秒
    enterTransition = { slideInHorizontally(tween(500)) { it } },
    // 从屏幕右侧退出，持续500毫秒
    exitTransition = { slideOutHorizontally(tween(500)) { it } }) {

    ThemeListComposable(
        route = it.toRoute(),
        navigator = navigator,
    )
}

@Serializable
data class ThemeListRoute(val id: Int = 1)


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ThemeListComposable(
    route: ThemeListRoute,
    navigator: GF2Navigator,
    viewModel: ThemeViewModel = viewModel(),
) {
    navigator.apply {

        val lazyPagingItems = viewModel.themeList.fetch(null).collectAsLazyPagingItems()

        Scaffold(
            topBar = {
                TopAppBar(navigationIcon = {
                    IconButton(onClick = { onPopBackStack() }) {
                        Icon(imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "后退")
                    }
                }, title = { Text("话题中心") })
            }
        ) { padding ->
            val modifier = Modifier.padding(padding)

            if (lazyPagingItems.itemCount == 0) {
                Loading()
            } else {
                Box(modifier) {
                    LazyColumn(verticalArrangement = Arrangement.spacedBy(4.dp), contentPadding = PaddingValues(4.dp)) {
                        items(lazyPagingItems.itemCount) { index -> ThemeItem(lazyPagingItems[index]!!, onNavigateToThemeDetail = { onNavigateToThemeDetail(it) }) }
                    }
                }
            }
        }
    }
}

@Composable
fun ThemeItem(
    themeInfo: ThemeInfo,
    onNavigateToThemeDetail: (route: ThemeDetailRoute) -> Unit = {},
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .clickable { onNavigateToThemeDetail(ThemeDetailRoute(themeInfo.id)) },
        border = BorderStroke(2.dp, CardDefaults.cardColors().disabledContentColor),
    )
    {
        Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
            MyImage(themeInfo.showPic, modifier = Modifier.width(80.dp))
            Spacer(modifier = Modifier.width(4.dp))
            Column {
                Text(themeInfo.name, fontSize = 20.sp, fontWeight = FontWeight.Bold)
                Text(themeInfo.desc, modifier = Modifier.graphicsLayer { alpha = 0.7f })
                Text("阅读: ${themeInfo.viewNum} | 讨论: ${themeInfo.discussNum}", modifier = Modifier.graphicsLayer { alpha = 0.7f })
            }
        }
    }
}